<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        a: 1,
      },
      //   created 钩子可以用来在一个实例被创建之后执行代码
      created: function () {
        // `this` 指向 vm 实例
        console.log("a is: " + this.a);
      },
    });
    /**
     * 也有一些其它的钩子，在实例生命周期的不同阶段被调用，
     *如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例
     *
     * 不要在选项 property 或回调上使用箭头函数，比如
     *  created: () => console.log(this.a)
     * 或 vm.$watch('a', newValue => this.myMethod())。
     * 因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，
     * 直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined
     * 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
     */
  </script>
</html>
